<template>
  <div id="root">
    <!--注意 @ = v-on  ：= v-bind 自定义事件atguigu该自定义事件需要在School组件中触发 通过 this.$emit触发-->
    <School @atguigu="gaveSchoolName" @demo="demo"></School>  
    <!-- <School @atguigu.once="gaveSchoolName"></School> 设置事件只能触发一次-->

    <!--给组件打标签，通过this.$refs.school获取组件实例 然后触发事件回调-->
    <!-- <School ref="school"></School> -->

    <!--父组件定义一个function传递给子组件，子组件使用props接收该函数，然后通过this调用将参数通过方法携带给父组件--> 
    <Student :gaveStudentName="gaveStudentName"></Student>

  </div>
</template>

<script>
import Student from './components/Student.vue'
import School from './components/School.vue'
/*
 子组件给父组件传递数据 方式1:使用props方式传递，首先父组件需要定义一个方法，传递给子组件，子组件调用该方法将参数传递给父组件
                      方式2：使用自定义事件
                            触发自定义事件使用 $emit
                            自定义事件回调：
                               @atguigu="gaveSchoolName" 或者 this.$refs.school.$once
                      事件解绑：$off
                      销毁组件，组件上的自定义事件会被销毁，销毁VM，则vm下的所有vc均被销毁且vc上的自定义事件被销毁，而原生dom事件不会被销毁，但是响应式不奏效

                                  
*/
export default {
  name: "App",
  components:{
   School,
   Student
  },
  data:function(){
    return {
      schoolName:''
    }
  },
  methods:{
     gaveStudentName(value){
       console.log("获取到子组件传递给父组件的StudentName值:",value);
     },
     //当传递多个参数时，可以使用 对象封装或者 ...params 此时会将所有的可变参数整理成为一个数组
     gaveSchoolName(value,...params){
      this.schoolName = value
      console.log("获取到子组件传递给父组件的SchoolName值:",value,params);
     },
     demo(){
      console.log("自定义demo事件回调");
     }
  },
  //这里写成箭头函数，因为这里规定的this是触发事件的组件的实例对象，如果写成常规函数，则this就是School组件实例的VueComponent,写成箭头函数，因为箭头函数没有this，所以会向上找，找到App的组件实例对象.
  // mounted(){
  //   this.$refs.school.$on('atguigu',(name) =>{
  //     this.schoolName = name
  //     console.log(name);
      
  //   })
    //设置自定义事件只能被触发一次
    // this.$refs.school.$once('atguigu',(name) =>{
    //   this.schoolName = name
    //   console.log(name);
      
    // })
  //}
}
</script>

<style>
</style>


